Since React is currently one of the most in-demand front-end technology, I have decided to start a course series that intends to show you how to create the React js app from scratch to finish. Today most of the front-end applications are mostly showing real-time data fetched from some backend service, I have decided that it will be useful to create a cryptocurrency single page application that will show prices and chart history of cryptocurrencies that will be fetched from some backend service. Note: To follow this ReactJS course series you should have some basic knowledge in JavaScript programming language, even better if you know ES6. Setting Up React Before we start setting up the ReactJS app, firstly we need to have node.js installed on our computer. To check if node.js is installed you should open up the terminal or PowerShell in Windows and type: node -v If this shows you the node version, you can skip the installing part, else you should open https://nodejs.org/ and there you will find the latest version of node.js. Setting up React js is easy, Firstly we will name the app crypto-app. Next, we will open up the terminal with a path to the folder where we want the app to be stored. To create a React project we need to use the following command: npx create-react-app crypto-app Feel free to name your app differently if you want to, but in my case, I will name the app crypto-app. After a couple of seconds, the setup will finish with a couple of messages about our new React app. We can now use the following commands when we are inside the directory of the app: npm start       #starts the development server
npm run build   #bundles the app into static files for production
npm test        #starts the test runner To start our development server, first, we need to go into the project folder with the command "cd crypto-app", when we are inside the project folder we can finally start the development server with the command "npm start", our browser will open the app for us at localhost:3000, where we should see the React welcome screen. React File Structure To open our React project we need to use a text editor or IDE. When we open up the project in the text editor we can see a couple of configuration files and folders. - contains all node dependencies - node_modules - public files that are served - public - source code of our ReactJS app - src - record which files should git ignore .gitignore - contains an exact, versioned dependency tree package-lock.json - contains various metadata relevant to the project package.json - readme markdown file README.md First, we will look into the public folder. Here we have one important file and that is the  "index.html". This is a normal Html page which is a single page Html, in other words, we are not going to add more Html files to this project. React App You need to enable JavaScript to run this app. <!DOCTYPE html> < = > html lang "en" < > head < = /> meta charset "utf-8" < = = /> link rel "icon" href "%PUBLIC_URL%/favicon.ico" < = = /> meta name "viewport" content "width=device-width, initial-scale=1" < = = /> meta name "theme-color" content "#000000" < = = /> meta name "description" content "Web site created using create-react-app" < = = /> link rel "apple-touch-icon" href "%PUBLIC_URL%/logo192.png" < = = /> link rel "manifest" href "%PUBLIC_URL%/manifest.json" < > title </ > title </ > head < > body < > noscript </ > noscript < = > div id "root" </ > div </ > body </ > html : I have deleted the comments so the file will look a bit cleaner, as it is not that complex as it looks like. Note If you need to add any inputs, libraries like CSS, or meta tags you can do that here, in this file. Most important part about this file that you should remember is that "<div id="root"></div>" is where the React application is mounted. Another interesting place for us is the "src" folder. When we open our "src" folder we can see a couple of files here, these files are our React application. The most important file here is the "index.js". Let's see how does it look: React ; ReactDOM ; ; App ; * serviceWorker ;

ReactDOM.render( import from 'react' import from 'react-dom' import './index.css' import from './App' import as from './serviceWorker' , document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister(); < /> App Here the "ReactDOM.render(<App />, document.getElementById('root'));" method renders our React application. As the first argument we have "<App />" component (we will look into React components in depth later, for now, you can think of it like some element) which was imported at the top of our file. The second argument is where we get access to the root element in our DOM, in the Html file, which we saw before in the public folder. Now let's open the "App.js" file, our only ReactJS component for now. React ; logo ; ; { ( <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> import from 'react' import from './logo.svg' import './App.css' ( ) function App return < = > div className "App" );
}

export default App; Here we see JSX code (we will see later what it is), for now, we will remove all of the content in the wrapping div, also remove the logo import at the top and we will add h1 tag just for testing purpose with text inside it: Hello, World!, and then we will save it!. React ; ; { ( <h1>Hello, World!</h1> );
} App; import from 'react' import './App.css' ( ) function App return < = > div className "App" </ > div export default App.js Because we have "npm start" command running, this will automatically trigger recompilation, and will also automatically reload your page (localhost:3000), which now you will see: Hello, World, instead of the old content. We can also remove the "logo.svg" file as we no longer needed. Lastly, let's see the two CSS files available, In the "App.css" we will delete everything but the first ".App" class. { : center;
} .App text-align App.css The rest of the files are the "serviceWorker.js" which is related to the progressive web app, and some files related to unit testing. Part Overview In this part we have seen how we can create React application from scratch, also we have seen the project structure of newly created React application, and at the end, we have tweaked some of the components. The code from the course is available on GitHub: on the branch: 01-setting-up. Create React App From Scratch This post is a part of the series you can find the other parts at Create React App From Scratch CodeSpot Next part: Create React App From Scratch Part 2: Into Components (Originally Published ) here

Too Long; Didn't Read

Making security fun one episode at a time

How To Create React Apps From Scratch: [Part 1 - Setting Up]

Too Long; Didn't Read

Aleksandar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Create React Apps From Scratch: [Part 1 - Setting Up]

Too Long; Didn't Read

Aleksandar

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES