React Native Components (Part 2)

Jae Duk Seo
Nov 14, 2019 · 4 min read

Core Components → use from React Native App → since those are native complied.

Image for post
Image for post

There are more → but most of them are good enough for apps.

Image for post
Image for post

I can create my own → but the building blocks are from Native Components → React native is not supported by CSS → we have to use different stuff.

Image for post
Image for post

Start again with the expo → option as blank and now able to create a new app. (it is so easy to compile and use the app). (the apps are launched → the starting project looks good → and now able to create more detailed implementations).

Create an App where we can save our goals → super cool and interesting.

Image for post
Image for post

Buttons and more → and the list of text and more. (view is div and text is the words → but we need to give text between view).

This is important → this is not web development.

We can have another view inside a view LOL.

Image for post
Image for post

React Native components have their own jobs to execute. (the guides will have a good explanation of react-native).

We can have TextInput and Button.

Image for post
Image for post

TIme to style the APP → we can have padding and a couple of other CSS → this is good and very interesting. (layout and more).

Image for post
Image for post

There is an input portion above the button → very interesting. (this is so cool).

Place Holder → we are going to put the text inside the text input.

We have to use the property names in the document → this is a good thing since we are able to unify.

The layout is key for App development.

FlexBOX → is another critical component.

Image for post
Image for post

That change is simple yet effective.

For App development → really the layout is the key change.

Image for post
Image for post

These are not ideal → have to use flexbox.

Flexbox → organizing the viewpoint and more → this is what the flexbox is being done. (how to make child and adult element) (this concept is in HTML as well).

There are a lot of hyperparameters to add → to change the views.

Image for post
Image for post

As we can see → the above user can change the layouts → so it seems like react development is more or less changing the layouts.

This is important → but I am not interested in this → good to know the basics → but we can generally just but the template → while coding the business logic.

Style Sheet → again this is → HOW TO arrange the elements in the app → front end portions. (I should bootstrap from different values).

Image for post
Image for post

These are good and interesting stuff.

React Hooks are a must learns → this is so sexy.

Image for post
Image for post

Hook the state → now we do not need class anymore → on change.

Every input → changes the variable.

Image for post
Image for post

That is it! → simply run the code whenever there is a change.

Bind the value → and we are done. (basically → create a function and start to bind them into different things).

Image for post
Image for post

The console log is supported!

JavaScript In Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store