Console logging for react? Console logging for react? javascript javascript

Console logging for react?


javascript reactjs meteor logging jsx

If you're just after console logging here's what I'd do:

export default class App extends Component {  componentDidMount() {    console.log('I was triggered during componentDidMount')  }  render() {    console.log('I was triggered during render')    return (       <div> I am the App component </div>    )  }}

Shouldn't be any need for those packages just to do console logging.

javascript reactjs meteor logging jsx

Here are some more console logging "pro tips":

console.table

var animals = [    { animal: 'Horse', name: 'Henry', age: 43 },    { animal: 'Dog', name: 'Fred', age: 13 },    { animal: 'Cat', name: 'Frodo', age: 18 }];console.table(animals);

console.table

console.trace

Shows you the call stack for leading up to the console.

console.trace

You can even customise your consoles to make them stand out

console.todo = function(msg) {    console.log(‘ % c % s % s % s‘, ‘color: yellow; background - color: black;’, ‘–‘, msg, ‘–‘);}console.important = function(msg) {    console.log(‘ % c % s % s % s’, ‘color: brown; font - weight: bold; text - decoration: underline;’, ‘–‘, msg, ‘–‘);}console.todo(“This is something that’ s need to be fixed”);console.important(‘This is an important message’);

console.todo

If you really want to level up don't limit your self to the console statement.

Here is a great post on how you can integrate a chrome debugger right into your code editor!

https://hackernoon.com/debugging-react-like-a-champ-with-vscode-66281760037

javascript reactjs meteor logging jsx

If you want to log inside JSX you can create a dummy component
which plugs where you wish to log:

const Console = prop => (  console[Object.keys(prop)[0]](...Object.values(prop))  ,null // ➜ React components must return something )// Some component with JSX and a logger insideconst App = () =>   <div>    <p>imagine this is some component</p>    <Console log='foo' />    <p>imagine another component</p>    <Console warn='bar' />  </div>// Render ReactDOM.render(  <App />,  document.getElementById("react"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script><div id="react"></div>
Expand snippet