React 101 - part 5: Create React App

After my Javascript series: https://dev.to/rickavmaniac/javascript-my-learning-journey-part-1-what-is-javascript-role-and-use-case-49a3

I am now ready to begin my React learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my React course the day before.

Without further ado here is a summary of my notes for day 5.

Create React App

Up until now we use React CDN link. But like I say to build real world app and go to production we have to install all those tools and libraries into our machine.

This installation process it complicated and time consuming, that's why React introduce a tool to do that automatically: The Create React App command.

Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

To use this command we need to install node.js (https://nodejs.org/en/)

Once node.js is install we can now go into the terminal inside our project folder and execute:

npx create-react-app my-app-name

The command will install React, ReactDOM, ReactScript and many more dependencies.

Once install, to launch to new project execute:

cd my-app
yarn start

To stop the server you can hit ctrl-c

If you open your code editor you will see the new file structure

In the public folder we have an index.html that is the entry point of our app. In that file there is a div with an id="root". That div is the container for our React Components.

That link is specified in the index.js file. The ReactDOM.render() will render our React components

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

The welcome screen you saw when you launch the application was the code include in the App component.

To see the App component you can open App.js. There we have a function React Component.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

This code has been create by the create-react-app command. It will be overrite soon with your code.

Conclusion

That's it for today. tomorrow the journey continue... If you want to be sure to miss nothing click follow me!