Coder Social home page Coder Social logo

React's Introduction

If you are following the HackYourFuture curriculum we recommend you to start with module 1: HTML/CSS/GIT. To get a complete overview of the HackYourFuture curriculum first, click here.

Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.

Module #7 - React.js: Building dynamic UIs with modern JavaScript (Frontend)

React Module

Welcome to the React module! Congratulations on making it this far!

In these 4 weeks we will go back to the frontend and learn how to make faster, more modern user interfaces. In the HTML and JavaScript modules you've learned all about creating webpages that that hold unchanging data. No matter who is using the website, the data will always be the same. We call this a static website. At the same time you've build various HTML pages so the user is able to access various parts of the website. We call this a multi-page application (MPA)

In the Node.js module you've learned about how to change the content of the page, based on the user's input, using a templating engine. Type in a keyword and the server sends back a template with customized data. We call this a dynamic website. However, we did it in such a way were we still had to send different pages to the client depending on the URL (for example, / or /users). This is also an MPA.

In this module, however, you'll learn how to make more complex websites. Though, we won't be calling them websites anymore: they'll be web applications. They're not just informational, but allow the user to interact with it. This similar to any application on your desktop. These React applications will also deal with dynamic data: its state changes depending on who's using it.

Besides being dynamic, React applications also are single page applications (SPA). Essentially, this means that on loading the whole application (every page and its contents) is accessible to the user, without the need to send requests to the server to get another page.

Before you start

In order to properly work through this module smoothly we're going to use software that will allow us to write React applications with ease. It's called create-react-app.

Go to your command line and execute the following:

npm install -g create-react-app

Now verify that you have it by executing the following:

create-react-app --version

It should be at least version 2.1.x.

Learning goals

In order to successfully complete this module you will need to master the following:

  • Understand the React way of thinking about user interfaces
  • Know the importance and place of state and how to pass it down
  • Be able to work with different hooks and even create your own
  • Recognize the utility of modularization
  • Putting emphasis on writing reusable code (components)
  • How to handle client-side routing

How to use this repository

Repository content

This repository consists of 3 essential parts:

  1. README: this document contains all the required theory you need to understand while working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the first thing you should start with every week
  2. MAKEME: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
  3. LESSONPLAN: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!

How to study

Let's say you are just starting out with the Databases module. This is what you do...

  1. The week always starts on Wednesday. First thing you'll do is open the for that week. For the first week of Databases, that would be Week1 Reading
  2. You spend Wednesday and Thursday going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the Node.js module)
  3. On Friday you start with the homework, found in the For the first week of React, that would be Week1 Homework
  4. You spend Friday and Saturday playing around with the exercises and write down any questions you might have
  5. DEADLINE 1: You'll submit any questions you might have before Saturday 23.59, in the class channel
  6. On Sunday you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
  7. You spend Monday and Tuesday finalizing your homework
  8. DEADLINE 2: You submit your homework to the right channels (GitHub) before Tuesday 23.59. If you can't make it on time, please communicate it with your mentor
  9. Start the new week by going back to point 1!

In summary:


To have a more detailed overview of the guidelines, please read this document or ask your mentor/class on Slack!


Week Topics Reading Materials Homework
1. What is React, JSX, State & Props, Deploy a static site Readings W1 Homework W1
2. API calls, Testing Readings W2 Homework W2
3. Client-side routing, Context, Custom hooks Readings W3 Homework W3
4. Project! Readings W4


Did you finish the module? Impressive!

If you feel ready for the final challenge, click here to go to Project!

The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.

React's People


robvk avatar joostlubach avatar isaachinman avatar dependabot[bot] avatar NoerGitKat avatar spirosikmd avatar mkruijt avatar Tjebbee avatar ArcoMul avatar nick-barth avatar n4cr avatar NouranMahmoud avatar shrynx avatar suh3yb avatar


riruigit avatar  avatar Mohammad Yasin avatar Rehan Qasim avatar Munik Ahmed avatar  avatar waliJW avatar  avatar MattBlueX avatar Ahmed Farege avatar Dumitru J. avatar Ivan Spetter avatar  avatar Fatmanur BULUT avatar Violet Kiseleva avatar Sardor Madaminov avatar Erics Nguyen avatar Tuan Ton avatar Julian Gernun avatar Player8260 avatar Douglas Moore avatar Enzo Damascena avatar  avatar  avatar Omar Betanzos avatar Darkhan Tleuzhan avatar  avatar  avatar Rio Trilaksono Putro avatar Harshil Patel avatar Kartik Setia avatar 灰太狼的大智慧 avatar Rahmat Satyawan avatar  avatar  avatar  avatar  avatar Saran avatar alireza babaie avatar ZMajer avatar Abigail Adams  avatar  avatar el avatar Julio Jain Edward avatar Mahmoud Kadoum avatar  avatar huyunlei avatar Vijayakumar S avatar Bryan C Guner avatar Marian Gavlytskiy avatar Allen Hughes avatar Mohamed Mehdi Gara avatar Glenn Gijsberts avatar  avatar Axel Friberg avatar  avatar dzakki avatar Amy Householder avatar  avatar  avatar Rupali avatar Vinícius Castro avatar PRODXENGINE avatar Dipta Chowdhury avatar  avatar Janos Bakos avatar KENFACK MOMO ESAIE SILVERE avatar Joey de la Rama avatar Kanishka Sandaruwan avatar Sara Duarte avatar Jason De Freites avatar Doc avatar Dinesh K avatar eryoo avatar Pratush avatar  avatar  avatar Deni Akhmatukaev avatar Nehaa G avatar Anmol Arora avatar Anish S avatar  avatar nzia avatar Ebenezer avatar OMKAR AGRAWAL avatar Bernardo Martelli avatar Haidar avatar ACamiruaga avatar reallykim avatar tushar avatar Bodunrin David  avatar Chintan Dobariya avatar Otilia avatar Rajdeep Purkayastha avatar Nina avatar  avatar JuanIbarra avatar Irini Strangeloop avatar Palak Gupta avatar  avatar


Onne avatar Natan Santolo avatar Wilgert Velinga avatar Mauro Mandracchia avatar Rohan Nicholls avatar James Cloos avatar Nasir Shadravan avatar Daan avatar  avatar  avatar  avatar Ahmad Kabakibi avatar Stuart Jones avatar Yahya Alfayad avatar Nick Barth avatar Roxana Lafuente avatar Breus Blaauwendraad avatar Glenn Gijsberts avatar Gijs C  avatar  avatar Machiel visser avatar  avatar  avatar Sander avatar  avatar Admin HackYourFuture avatar Robert Silva avatar  avatar  avatar

React's Issues

week 3 homework

In week3 hackyourtemp project we require to use the second route as /:cityId but the only allowed package for free is this

and we only can fetch by using latitude and longitude
so I suggest just to say make another route or make it more clear to be easier for students because it's already hard week 😅
best regards

Asking some aprovments in Homework week3.

Looking to the results of students class18'th homeworks and their hard work, I found it's very useful to have multiple programs into one application.
showing them how we could make multiple programs related to each other with nothing but the parent Component providing for them a great experience with the Feature Synonyms, and what they may find of a strange requirements from their clients in the job market.

The second and third steps for me were a great steps forward into their journey with the life cycle hooks and the server side integration, By looking to what do we have:

  • The very first one is for learning how to deal with a third party API.
  • after words we have

Create reusable components, at least 3

I kindly disagree on this part before I saw the homeworks, supported with results of what we do have in the homeworks afterwards:

  • #358 ( 2 ) components.
  • #357 ( 1 ) component.
  • #356 ( 3 ) components with a little bit of content 👌🏻.
  • #355 ( 3 ) 🙌.
  • #354 ( 2 ) for being accurate.
  • #353 ( ... ) we can't say they are three but also they are three, in another side of view they are 3. (one contains two)

And we have the great addition we hadn't before which is (Development server).
It's Great, well organized, and having a very nice steps which includes:

  • (1) loading in of Express and initializing it
  • (2) code that let's Express know where you hold your static files
  • (3) a GET route that sends the index.html file from your public folder in the client as a response to the browser (take the / route)
  • (4) a listener to a random PORT number (for example, 1234)
  • (5) inside the package.json of write a rule for a proxy that refers the React development server to the Express server port

My comments:

  • (1) 🙌
  • (2) we can't say all done (from small discussion I knew it's because of what to serve and why)
  • (3) exactly as it's previous. (Also same with the routes)
  • (4) 🙌
  • (5) 🙌

But the most important parts are not clear yet. my guess here is because there is no goal nor a connection of these multiple applications. (back-end front-end)

what I may suggest instead we could have a small feature on the front-end connected with it's end point on a back-end as a student made also we can provide the third party application feature front or back so it's a win win, And we can keep the last homework submission component as a feature asking to fix and shortness long codes from their new experience of the current week, as any company employments.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.