React in two weeks roadmap

React in two weeks roadmap.html

<h1 id="react-in-2-weeks-roadmap">React in 2 weeks roadmap</h1>

<h2 id="1-development-environment">1. Development environment</h2>

<p>It’s recommended to set up a local environment for better development experience. But you can choose to use some online IDEs also: <a href="https://codesandbox.io/">https://codesandbox.io/</a>, <a href="https://stackblitz.com/">https://stackblitz.com/</a></p>

<p>The local development environment requires NodeJS and npm, and an IDE of choice.</p>



<h3 id="11-nodejs-and-npm">1.1 NodeJS and npm</h3>

<p>You can head up to the NodeJS <a href="https://nodejs.org/en/download/">download page</a> and follow the instructions to get the latest version of NodeJS.</p>

<p>A more preferable way to install NodeJS is to use nvm, a NodeJS version management tool.</p>

<p>You can follow <a href="https://github.com/nvm-sh/nvm#install--update-script">nvm install instructions</a> or simply run:</p>

<pre class="prettyprint"><code class="language-bash hljs ">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.<span class="hljs-number">35.3</span>/install.sh | bash

<span class="hljs-comment"># or</span>

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.<span class="hljs-number">35.3</span>/install.sh | bash</code></pre>

<p>Then install NodeJS with:</p>

<pre class="prettyprint"><code class="language-bash hljs ">nvm install <span class="hljs-number">10</span>
<span class="hljs-comment"># install latest NodeJS version 10</span></code></pre>

<p>Check your installation with:</p>

<pre class="prettyprint"><code class="language-bash hljs ">node -v
<span class="hljs-comment"># v10.19.0</span>
npm -v
<span class="hljs-comment"># 6.13.4</span></code></pre>

<p><em>Note: It’s ok if your version is different than my</em></p>



<h3 id="12-install-your-ide">1.2 Install your IDE</h3>

<p>You should use <a href="https://code.visualstudio.com/download">VSCode</a> for development but Sublime Text, IntelliJ or any text editor can be used. </p>

<p>Here are some extensions you should install to make the development better: <br>
  - <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier</a>: Code formater <br>
  - <a href="https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets">React Simple Snippets</a>: Snippets for faster React development.</p>



<h2 id="2-basic-web-knowledge">2. Basic web knowledge</h2>

<p>React development requires some basic knowledge in web development including HTML, CSS, and modern Javascript.</p>

<p>Here are some resources that can quickly help you get started with Javascript development: <br>
  - <a href="https://www.youtube.com/watch?v=W6NZfCO5SIk">Javascript for beginners</a>: This video gives you the fundamentals of Javascript.  <br>
  - <a href="https://www.youtube.com/watch?v=NCwa_xi0Uuc">ES6 tutorial</a>: ES6 or Ecmascript version 6 is a modern version of Javascript published in 2015. ES6 includes some new features that will be used a lot when developing modern Javascript apps.</p>

<h2 id="3-your-first-react-app">3. Your first React app</h2>

<p>The fastest way to scaffold a React app is to use an online editor with a React template or using <a href="https://create-react-app.dev/docs/getting-started">Create React App</a> locally.</p>

<p>Create a new React app with CRA is just as simple as: </p>

<pre class="prettyprint"><code class="language-bash hljs ">npx create-react-app my-app
<span class="hljs-built_in">cd</span> my-app`
npm start</code></pre>

<p><a href="https://www.youtube.com/watch?v=Ke90Tje7VS0&amp;t">This video</a> a good starting point to get to know React fundamentals.</p>

<h2 id="4-calculator-app">4. Calculator App</h2>

<p>Its time to create your own React app. Your first React app can be anything, and a calculator app is a good starting point. </p>

<p><img src="https://daveceddia.com/images/calculator@2x.png" alt="Calculator example" title=""></p>

<p>Your app functionality should include: <br>
  - number keypad  <br>
  - basic math operators: add, subtract, multiply, divide <br>
  - clear <br>
  - advanced: capture keyboard events instead of clicking with the mouse.</p>

<p>This app will help you get better with React state management and events handling. <br>
Spend a little time thinking about how the state will be represented. Do you need to store more than just the numbers on the display? When you type a new number, does it replace the display with that number, or append it to the end?</p>

<h2 id="5-weather-app">5. Weather App</h2>

<p><img src="https://daveceddia.com/images/weather@2x.png" alt="Weather App" title=""></p>

<p>This app will help you get started with remote data loading and asynchronous action handling.</p>

<p>Display a 5-day weather forecast, where each day shows the high and low temperatures and an image for sunny/rainy/cloudy/snowy. Use fake, hard-coded data until you’ve got everything rendering correctly.</p>

<p>The next step is to sign up for a free API key from <a href="https://openweathermap.org/">Open Weather Map</a>, fetch a real 5-day forecast, and feed that data into your app.</p>

<p>Next, add the ability to click on a day, and see its hourly forecast. You can just maintain the current view in the top-level App state.</p>

<h2 id="6-whats-next">6. What’s next?</h2>

<p>After getting familiar with basic React concepts, it’s time to dig deeper. <br>
Here are some topics that you could choose to learn:</p>



<h3 id="61-state-management">6.1 State management</h3>

<p><a href="https://reactjs.org/docs/faq-state.html">https://reactjs.org/docs/faq-state.html</a> <br>
<a href="https://reactjs.org/docs/context.html">https://reactjs.org/docs/context.html</a></p>



<h3 id="62-client-side-routing">6.2 Client-side routing</h3>

<p><a href="https://reactrouter.com/web/example/basic">https://reactrouter.com/web/example/basic</a></p>



<h3 id="63-react-hooks">6.3 React hooks</h3>

<p><a href="https://reactjs.org/docs/hooks-intro.html">https://reactjs.org/docs/hooks-intro.html</a></p>



<h3 id="64-error-boundaries">6.4 Error boundaries</h3>

<p><a href="https://reactjs.org/docs/error-boundaries.html">https://reactjs.org/docs/error-boundaries.html</a></p>