Gain insights into React fundamentals and Hooks. Delve into styling, app maintenance, and performance optimization. Discover hands-on experience by building a Hacker News app for your portfolio.

road_to_react.tar.gz

React JSX-copy

axios-react

Typescript-React

React World (Advanced)

Unit_Integration_test

Unit Integration test Jest

This is a relaunch of my existing course, The Road to Learn React. A lot has changed in React since I first created this course, and so here I am to give you all the information you need to work with modern React. (If you’re looking for content on legacy React, the old course is still available as well.)

In this course you will take a deep dive into React fundamentals, covering all new React concepts including Hooks. I do address some legacy features in case you’re working with an older codebase, but the majority of this course will focus on working with modern React. You will learn how to style your app, techniques for maintaining your app, and some more advanced concepts like performance optimization.

Throughout the course, you will gain hands-on experience by building a Hacker News app, and by the end of this course, you will be prepared to build your own applications and have something to showcase in your portfolio.

The Road to React: The One with Hooks

In the Road to React, we'll use [create-react-app](https://github.com/facebook/create-react-app) to bootstrap your application. It's an opinionated yet zero-configuration starter kit for React introduced by Facebook in 2016, which is [recommended for beginners by 96% of React users](https://twitter.com/dan_abramov/status/806985854099062785). In *create-react-app*, the tools and configurations evolve in the background, while the focus remains on the application's implementation.

> 📜 **Note:** You can find the steps for the local setup in the Appendix chapter. But with Educative, you can see the live execution of the code using **Educative SPA widget**.


# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*


{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 70
}

language: node_js

node_js:
  - stable

install:
  - npm install

script:
  - npm test


# The Road to React - Hacker Stories

[![Build Status](https://travis-ci.org/the-road-to-learn-react/hacker-stories.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/hacker-stories) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/hacker-stories.svg)](https://greenkeeper.io/)

Source Code for [The Road to React](https://roadtoreact.com).


React

Dart

GoJS React

Typescript React

Vue.js

# Project structure
The react App project structure on Educative SPA is as follows:

```shell
--public/
--src/
----App.css
----App.js
----App.test.js
----index.css
----index.js
----logo.svg
--.gitignore
--package-lock.json
--package.json
--README.md
```

This is a breakdown of the most important folders and files:

* **README.md:** The *.md* extension indicates the file is a markdown file. Markdown is a lightweight markup language with plain text formatting syntax. Many source code projects come with a *README*.md file that gives instructions and useful information about the project. When we push projects to platforms like GitHub, the *README.md* file usually displays information about the content contained in its repositories. Because you used create-react-app, your *README.md* should be the same as the official [create-react-app GitHub repository](https://github.com/facebook/create-react-app).
* **node_modules/:** This folder contains all node packages that have been installed via npm. Since we used create-react-app, a couple of node modules are already installed. We'll not touch this folder, since node packages are usually installed and uninstalled with npm via the command line.
* **package.json:** This file shows you a list of node package dependencies and other project configurations.
* **package-lock.json:** This file indicates npm to break down all node package versions. We'll not touch this file. This file is hidden in Educative SPA widget.

* **.gitignore:** This file displays all files and folders that shouldn't be added to your git repository when using git, as such files and folders should be located only in your local project. The *node_modules/* folder is one example. It is enough to share the *package.json* file with others, so they can install dependencies on their end with `npm install` without your entire dependency folder.
* **public/:** This folder holds development files, such as *public/index.html*. The index file is displayed on *localhost:3000* when the app is in development or on a domain that is hosted elsewhere. The default setup handles relating this *index.html* with all the JavaScript from *src/*.

In the beginning, everything you need is located in the *src/* folder. The main focus lies on the *src/App.js* file which is used to implement React components. It will be used to implement your application, but later you might want to split up your components into multiple files, where each file maintains one or more components on its own.

Additionally, you will find a *src/App.test.js* file for your tests, and a *src/index.js* as an entry point to the React world. You will get to know both files intimately in later sections. There is also a *src/index.css* and a *src/App.css* file to style your general application and components, which comes with the default style when you open them. You will modify them later as well.

This lesson will provide the guideliness to set up a react project.

Introduction

Fundamentals of React

React Legacy

Styling in React

React Maintenance

React World (Advanced)

Deploying a React Application

Final Words

Appendix

Exploring a React Project Directory Structure