Some Gotchas when learning React

On my journey of learning React, there were some hurdles…

Most often, I ran into trouble and errors that I had no idea how to resolve because console logging and comments simply won’t work.

Why? Because I did not expect my comments or console.logs to break my code!!

1. Console.log — my best debugging tool broke my code

2. Innocent - Looking Comment broke my code

Here, the JSX section is anywhere within a Stateless Functional Component

console.log('console.log works with or without {}');
var App1 = (props) => (
//comment here ok. This is still JS block
// console.log('console.log here, with or without {} breaks code ');
<div>
//comment here breaks code. JSX starts
{console.log('works here')}
</div>);

In a Stateful Class Component, the JSX section is within the return () section. JS code outside.

render (){
//comment here is ok. JS block
{console.log('console log in JS block ok')}
return (
//comment here will break your code. JSX section
{console.log('console log here ok')}
)
}

Take Away:

  1. Understand where a JSX component starts. Usually inside any <html> looking tags or inside the () wrapping the multiline <html> tags. Do not put any comment there.
  2. Same thing applies to console.log. Wrap {console.log}

3. Components vs elements — which is which? how should I embed them?

React elements: represents the UI at a point of time. Usually defined by <html> tags.

//Elements
const elem = <h1>Hello, world!</h1>;

React components: Usually defined by functions or ES6 classes that accept ‘props’ arguments. To change components to elements, just wrap the component around ‘<>’, e.g. <Component-Name />.

Why? Because elements can be rendered as html elements!

//Components
//ES5
function Welcome(props) { return <h1>Hello, {props.name}</h1>; }
//ES6
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
//To render elements and components in App.js
var App = ()=>(
{elements}
<Welcome />
);

4. 3 ES5 and ES6 syntax for creating React Components

App1, App2, App3

The following 3 are equivalent ways of creating React components with slightly different syntax. Watch out for the {} vs () when using ES6 syntax!

//ES6, notice there is () after fat arrow!
var App1 = (props) => (
<div>
{props.answer}
<NavModule />
I am separation line
</div>
);
//ES6, using the {return();} after fat arrow & destructuring patter
var App3 = ({test}) =>{
return (
<div>
This is App3
<br />
in another ES6 syntax
<br />
This is an attempt of trying ES6 destructureing..{test}
</div>
);
};
//ES5
function App2(props) {
return (
<div>
<h3>hahahshs {props.functype}</h3>
<TodoItem />
</div>
);
}

5. Common Error

Uncaught Error: Cannot find module.....

This usually means I forgot to wrap the elements inside the render() function inside the single html element.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store