Bootstrapping a React Native Project in 2021

hello react native developers i hope you are well william here recording from beautiful switzerland since the past few years every january i will make a video on how to bootstrap a react native project the reason was that every year the best practices would change dramatically now vcr is different vcr is more showcase of how things have become a de facto standard the javascript fatigue is over and changes are more related to how much our quality of development experience has improved which brings us to the sponsor of this video tab nine tab nine is the ai powered code completion tool which i use in all of my videos you've been many asking me about this tool it has been the biggest improvement to the quality of my development experience in 2020 so it was a natural fit for timeline to sponsor this video more on them later and then i would like to show you something which is not part of bootstrapping a react native project in 2021 but but that might become part of it later down the road let's have a look [Music] before we start our first react native project let's have a look at my vs code settings you've been many asking me about the theme i'm using in my videos and it's paranite operator from hola hola ue shout out extremely talented designer and developer i tried many vs code themes there are many really cool themes but this one in terms of the level of details it is my favorite it is a matter of taste of course but i'm really enjoying using this theme then i'm using the typescript support which is built in into vs code and then in order of priority the second most important extension that i use is the eslint extension and as you know already have a configuration which is using the preacher plugin so it's also my code formatter so if we go to the extension settings it is enabled as a formatter the on save the auto formatting will be done and the validation is done for each key stroke so extremely important extension in my vs code setting and then a small extension you've also been asking me about is color alight which is a way to visualize color values in your code extremely convenient and then after the eslint extension my most important code extension is tab 9 ai powered code compression tool it has been very good at guessing the code i'm about to write let me show you an example so we're going to create a react native component and so by the way so if i go in my snippets here i simply in typescript react.json created my own snippet to have like a base component so i'm gonna use it here i'm writing comp and i'm accessing the snippet and i can put my component name now we're going to do a pan gesture and learn so we know that we need to create two animation values translate x translate y so i'm going to create you see so the icon here shows that it's timeline giving me the suggestions so somehow i write t and it knows it knows that i'm doing a lot of reanimated somehow and i'm about to write translate x or translate y so i'm writing translate x equals use shared value so somehow tab 9 knows that you know it's a pattern i i'm doing a lot use shared value has been auto imported and now if i press enter it knows that i'm likely to write the same for x isn't that cool i think it's very cool so you share value now let's create our punjabi channeler so and again you see you see here it's uh so that's interesting so it suggests punjabi channel correctly and here it suggests the way i used to ride on gesture event which is not the way i do it anymore but i'm sure it will update eventually so animate its animated view and style equals so you see here again interesting suggestions it's not what i want to write but i actually absolute feel so here i press control space to import stylesheet and i'm going to write on gesture event again here timeline is suggesting the property so the interesting thing is if i now let's say right on gesture event it's also guessing that i'm doing use animated gesture handler so it knows me quite well now when you write the punches handler things are quite repetitive we need to keep offset values so onstart we store where the translation is on active we add the offset value and the value of the gesture together and on end we might for instance snap somewhere so here i'm gonna write first i'm gonna declare the type of my context oops and then so this is the first parameter and then i'm going to have let's say x is a number and y is a number so this is my offset so now on start we have the event the context which allows us to keep a state across gestures so we are going to do context.x equals translate x that value so again time nine seems to be to know what i'm the code that i'm always writing so to see where the suggestion comes from is actually quite important here i'm writing react native i'm writing reanimated2 i know the apis i know the code i want to write so here usually the completions are going to be extremely helpful but if i'm writing maybe a code with a new api which i don't know yet i really want to rely on the semantic code completions i don't want to rely on some heuristic of what i might write so if you don't know the api you're using have a look at the icon in the code completion so you make sure that you are using a semantic values and not some heuristic value i think it correctly guessed here that i want to do the same on the y-axis now on active i am getting so i add the correct somehow about translation x translation y the context so you see it's not always 100 correct but eventually it does get the completion does get very very good and then i'm gonna do translate so you see here it has a suggestion based on it's not the code i want to write but based on previous code i've written we want to do translatex value equals translation x plus context.x so you see again and then if i press enter it knows that i want to write the same thing on the y-axis isn't that cool so this was a short demo of type nine as a ai powered contemplation tool which i've been using in my videos and which has really improved the quality of my development experience when creating a reactive project you have to choose two flavors using typescript or not using expo or not in 2021 using typescript is i feel a no-brainer it is not a new language it's a javascript you know and love plus type annotations the tooling around it is exactly the same using bubble using eslint the integration is so seamless and speaking of improving the quality of your development experience this is definitely going to bring you your biggest bang for your buck and then in my case because i do these videos on youtube and i'm trying to ship these demos to you in an agile way i'm going to use expo so i'm going to use the expo cli to create my project expo init and i'm going to use the default app name and here i'm going to choose a blank template using typescript now my project has been created and you see there is even a git in it now the first thing i want to do is to add the neslin configuration to my project i have my own eslint configuration which i use across all of my projects it's actually a pretty simple configuration you don't need to use it necessarily what i can recommend you is to use the uh react native eslint config which my configuration is based on and so this configuration is amazing and i can only recommend it to you and in fact if you go to my own configuration it's basically based on this configuration from react native community i have the typescript support enabled of course plus the eslint import plugin which i really love so it's a my configuration is actually pretty simple i have packaged it so i can use it across all of my projects so i'm gonna actually add it to my project and i need also to add eslint as a dev dependency and then i can have the default configuration here so dot eslint rc now if i go in package.json so first let me check if my eslint plugin is enabled it looks like it because it already i think you see on save reformatted everything so it seems to be enabled nicely perfect so if i go to package.json i have the default expo scripts and i have like some scripts which i also always used namely one to run yes lint and here i really want max warning to be zero in my setup warnings should be treated as errors and that's what this option does and in fact it's also because in the react native community s in configurations there are a lot of things which are warnings but i consider to be errors so this is perfect and then i have also the ts compiler script which is just the same command so i can use these scripts in ci and you know that i'm using reanimate between all of my projects which is still in release candidates and to enable it into an expo project there are a couple of steps we need to follow so first we're going to install it using expo install and you see here it's insane installing the latest stable version but the one we want to use is the version two release candidate so let's see if it's actually mentioned here so i'm gonna update the version number here we run yarn install oops let me go back now to the documentation so i need to add the bubble plugin here so i think i should have it here presets plugins so now i can enable the reanimated plugin so let's check if everything works i'm going to create an animation value let's call it weave so using use shared value from animated2 and here maybe i can create an animated view and i'm gonna add an animated style to it so animated style use animated style and maybe we return weave which is weave.value height let's pick 100. background color and so let me refresh okay we don't see anything which is expected and so use effect when the component mounts we can add to weave and so do weave that value with timing from 2 to i don't know 300 duration it's just a c demo five seconds let me import these things here let's have a look so here reanimated2 is enabled nicely now let me show you a weekend project that i started it's not part of bootstrapping a reactive project but it might become in reanimated2 there are booklets javascript functions which are compiled and executed on the ui thread and via a bubble plugin the javascript code that lives on the javascript thread and the worklet which live on the ui thread coexists nicely and typescript nor eslint have a clue that actually these functions live into two different environment and i would like to show you a neslin plugin which relies on the typescript compiler information that i've built in order to help us statically catch potential errors when writing worklets so here i have the use animated style which relies on some mix function from redash so let me create a function for instance called add a b and it returns a plus b now if i were to use this function into a worklet so via use animated style so one one and you see here eslint is complaining because it knows that add is not a worklet function and now if i add the workload directive it stopped complaining isn't that cool i think this is going to tremendously improve our user experience when writing reanimated to code here i'm using mixed from re dash and you see here the gsdock annotation worklet so the eslin plugin knows resolves the function from the re-dash module and knows that this function is a worklet so this is just a project i got started with there are other interesting checks we can add for instance if you have a side effect and to use animated style or use derived value so i'm pretty excited about this new eslint plugin that i've been working on which relies on the typescript type information to guess if you are communicating between the javascript thread and the ui thread in the in a way that might be buggy i hope that you enjoyed this video on my development setup and on how to create a reactive project thank you to time9 for sponsoring this video please let me know your own recipes when creating a react native project and if you have things you want to share with me about your development setup i am looking forward to talk to you soon and until next time happy hacking [Music]

Channel: William Candillon

Views: 27,721

Keywords: React, React Native, VSCode, Tabnine, ESLint

Id: 5ByuWilIMRg

Length: 17min 9sec (1029 seconds)

Published: Tue Jan 12 2021

Reddit Comments

[u/Puzzled_Initial568]

Header should say Expo.. It’s not for everyone

[u/deakon9]

Good video. I'm getting into React Native and hadn't known about Expo before this.

[u/andaskus]

I would recommend setting "ts" in package.json to ./node_modules/typescript/bin/tsc instead of just ts.
If you have a different tsc version globally it may yield different results